<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>管理员列表</title>
    <link rel="stylesheet" type="text/css" href="/manager/easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="/manager/easyui/themes/icon.css">
    <script type="text/javascript" src="/manager/easyui/jquery.min.js"></script>
    <script type="text/javascript" src="/manager/easyui/jquery.easyui.min.js"></script>
    <script type="text/javascript">
        //工具栏
        var toolbar = [{
            text: '新增',
            iconCls: 'icon-add',
            handler: function () {
                $('#dd-add').dialog('open');
            }
        }, '-', {
            text: '修改',
            iconCls: 'icon-edit',
            handler: function () {
                $('#dd').dialog('open');

                let row = $("#userlist").datagrid("getSelected");
                $("#update-manager-user-id").textbox("setValue", row.id);
                $("#update-manager-user-password").textbox("setValue", row.password);
                $("#update-manager-user-username").textbox("setValue", row.username);

                $("#update-manager-user-supplier-id [value='"+row.supplierid+"']").attr("selected", true);

                //所有节点取消checked
                let nodes = $("#ah").tree('getChecked');
                for (const node of nodes) {
                    $('#ah').tree('uncheck', node.target);
                }
                // 添加该角色的 checked
                for (const role of row.roles) {
                    let node = $('#ah').tree('find', role.id);
                    $('#ah').tree('check', node.target);
                }
            }
        }];
        $(function () {
            $('#userlist').datagrid({
                title: '管理员列表',
                iconCls: 'icon-save',
                url: '/manager/managerUser/findAll',
                columns: [
                    [
                        {field: 'id', title: '管理员ID', width: 100, align: 'center'},
                        {field: 'username', title: '管理员名称', width: 100, align: 'center'},
                        {field: 'password', title: '管理员密码', width: 100, align: 'center'},
                        {field: 'roles', title: '拥有的角色', width: 200, align: 'center', formatter: format}
                    ]],
                pagination: true,
                toolbar: toolbar,
                singleSelect: true
            });
            //初始化查询栏
            $("#submit_search").linkbutton({iconCls: 'icon-search', plain: true})
                .click(function () {
                    let data = {};
                    let username = $("#search-manager-user-name").val();
                    if (username != "") {
                        data.username = username;
                    }
                    $('#userlist').datagrid("reload", data);
                });

            //初始化
            $('#dd-add').dialog({
                title: '添加',
                width: 700,
                height: 500,
                closed: true,
                cache: false,
                href: '',
                modal: true,
                iconCls: 'icon-save',
                buttons: [{
                    text: '提交',
                    iconCls: 'icon-ok',
                    handler: function () {
                        let nodes = $("#ah-add").tree('getChecked');
                        let ids = new Array();
                        for (let i = 0; i < nodes.length; i++) {
                            ids[i] = nodes[i].id;
                        }
                        let supplierid = $("#add-supplier-id option:selected").val();
                        $.post("/manager/managerUser/add", {
                                username: $("#add-username-id").textbox("getValue"),
                                password: $("#add-password-id").textbox("getValue"),
                                supplierid: supplierid == -1 ? null : supplierid,
                                ids: ids
                            },
                            rs => {
                                if (rs.status != 200) {
                                    alert(rs.msg);
                                } else {
                                    $('#userlist').datagrid("reload");
                                }
                            }
                        );
                    }
                }, {
                    text: '关闭',
                    handler: function () {
                        $('#dd-add').dialog("close");
                    }
                }]
            });

            //初始化修改窗口
            $('#dd').dialog({
                title: '修改',
                width: 700,
                height: 500,
                closed: true,
                cache: false,
                href: '',
                modal: true,
                iconCls: 'icon-save',
                buttons: [{
                    text: '提交',
                    iconCls: 'icon-ok',
                    handler: function () {
                        let nodes = $("#ah").tree('getChecked');
                        let ids = new Array();
                        for (let i = 0; i < nodes.length; i++) {
                            ids[i] = nodes[i].id;
                        }
                        let supplierid = $("#update-manager-user-supplier-id option:selected").val();
                        $.post("/manager/managerUser/update", {
                                id: $("#update-manager-user-id").textbox("getValue"),
                                username: $("#update-manager-user-username").textbox("getValue"),
                                password: $("#update-manager-user-password").textbox("getValue"),
                                supplierid: supplierid == -1 ? null : supplierid,
                                ids: ids
                            },
                            rs => {
                                if (rs.status != 200) {
                                    alert(rs.msg);
                                } else {
                                    $('#userlist').datagrid("reload");
                                }
                            }
                        );
                    }
                }, {
                    text: '关闭',
                    handler: function () {
                        $('#dd').dialog("close");
                    }
                }]
            });

            //tree选项框初始化
            $(".ah-tree").tree({
                url: "/manager/role/findAll2",
                method: 'post',
                animate: true,
                checkbox: true
            });

            //获取供应商数据
            $.post("/manager/supplier/findAll", rs => {
                $(".supplier-id-class").append("<option value=\"-1\">请选择供应商</option>");
                for (const r of rs.data) {
                    if (r.flag != 1){
                        continue;
                    }
                    $(".supplier-id-class").append("<option value=" + r.id + ">" + r.name + "</option>");
                }
            });

        });

        //列格式化方法
        function format(val, row) {
            let sel = "<select name='search_type' style='width:100%'>";
            for (const role of val) {
                sel += "<option value='" + role.id + "'>" + role.name + "</option>";
            }
            sel += "</select>";
            return sel;
        }
    </script>
</head>
<body>
<form name="searchform" method="post" action="" id="searchform">
    <td width="70" height="30"><strong>管理员查询：</strong></td>
    <td height="30">
        <input type="text" name="keyword" id="search-manager-user-name" size=20 placeholder="管理员名称"/>
        <a id="submit_search">搜索</a>
    </td>
</form>
<table id="userlist"></table>
<div id="dd-add">
    <div align="center" style="margin-top: 30px">
        <form id="ff-add" method="post">
            <div style="margin-bottom:20px">
                <input class="easyui-textbox" name="name"
                       id="add-username-id"
                       style="width:50%" data-options="label:'管理员名称:',required:true">
            </div>
            <div style="margin-bottom:20px">
                <input class="easyui-textbox" type="password" name="name" style="width:50%"
                       id="add-password-id"
                       data-options="label:'管理员密码:',required:true">
            </div>
            <div style="margin-bottom:20px">
                <select name='search_type' style='width:100px;'
                        id="add-supplier-id"
                        class="supplier-id-class">
                </select>
            </div>
            <div style="margin-bottom:20px">
                <table style="width:48%">
                    <td valign="top" style="width:50px">
                        角色:
                    </td>
                    <td>
                        <ul id="ah-add" class="ah-tree"></ul>
                    </td>
                </table>
            </div>
        </form>
    </div>
</div>

<div id="dd">
    <div align="center" style="margin-top: 30px">
        <form id="ff" method="post">
            <div style="margin-bottom:20px">
                <input class="easyui-textbox" name="name" style="width:50%" data-options="label:'管理员ID:'"
                       id="update-manager-user-id"
                       readonly="readonly"/>
            </div>
            <div style="margin-bottom:20px">
                <input class="easyui-textbox" type="password" name="name" style="width:50%"
                       id="update-manager-user-password"
                       data-options="label:'管理员密码:',required:true">
            </div>
            <div style="margin-bottom:20px">
                <input class="easyui-textbox" name="name" style="width:50%"
                       id="update-manager-user-username"
                       data-options="label:'管理员名称:',required:true">
            </div>
            <div style="margin-bottom:20px">
                <select name='search_type' style='width:100px;'
                        id="update-manager-user-supplier-id"
                        class="supplier-id-class">
                </select>
            </div>
            <div style="margin-bottom:20px">
                <table style="width:48%">
                    <td valign="top" style="width:50px">
                        角色:
                    </td>
                    <td>
                        <ul id="ah" class="ah-tree"></ul>
                    </td>
                </table>
            </div>
        </form>
    </div>
</div>
</body>
</html>